<template>
	<view class="SwitchingAccounts" :class='equipment'>
		<view class="SwitchingAccounts_box">
			<view class="SwitchingAccounts_box_item" v-for="(item,index) in list" :key="index">
				<view class="SwitchingAccounts_box_item_top">
					<view class="mobile">
						<p>{{item.mobile}}</p>
						<view class="itme">
							{{item.time}}
						</view>
					</view>
					<view class="title">
						{{item.nickname}}
					</view>
				</view>
				<view class="SwitchingAccounts_box_item_bottom">
					<view class="SwitchingAccounts_box_item_bottom_text"
						@click="account_loginFun({pwd:'516518',mobile:item.mobile})">
						登录
					</view>
					<!-- 	<view class="SwitchingAccounts_box_item_bottom_text">

					</view> -->
				</view>

			</view>
		</view>
		<view class="SwitchingAccounts_AddingAnAccount">
			<button class="SwitchingAccounts_AddingAnAccount_button" @click="show = !show">添加账号</button>
		</view>
		<u-popup :show="show" @close="show = false" @open="open">
			<view class="login_bottom_password">
				<view class="login_bottom_password_input">
					<image src="@/static/login/user.png" mode=""></image>
					<input class="login_bottom_password_input_text" v-model="mobile" placeholder="请输入账号／手机号码"
						type="text" />
				</view>

				<view class="login_bottom_password_input">
					<image src="@/static/login/lock.png" mode=""></image>
					<input class="login_bottom_password_input_text" v-model='pwd' :password="showPassword"
						placeholder="请输入密码" type="text" />
					<uni-icons style="padding: 0 30rpx;" size="22" :type="showPassword?'eye-filled':'eye-slash-filled'"
						@click="showPassword = !showPassword"></uni-icons>
				</view>

				<view class="login_bottom_password_input" @click="api_index_save_accountFun" style="background: linear-gradient(3deg, #ff3232, #ff3232, #ff8719);
					width: 100%;align-items: center;display: flex;justify-content: center;padding: 0;color: #fff;">
					确定
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		api_index_get_my_account,
		api_index_save_account
	} from '@/api/member.js';

	import {
		account_login
	} from '@/api/login.js'
	export default {
		data() {
			return {
				equipment: '',
				show: false,
				showPassword: true,

				openid: "",
				pwd: '',
				mobile: '',

				list: ''
			};
		},
		onLoad() {
			if (process.env.UNI_PLATFORM === 'h5') {
				// 在H5环境中打开
				console.log('在H5环境中打开');
				this.equipment = 'H5'
			} else if (process.env.UNI_PLATFORM === 'app-plus') {
				// 在App环境中打开
				console.log('在App环境中打开');
				this.equipment = 'App'
			}
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
					this.api_index_get_my_accountFun();
				},
				fail: () => {
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
			});
		},
		methods: {
			async account_loginFun(up) {
				let data = await account_login(up);
				if (data.status === 1) {
					this.showinteraction('登录成功')
					uni.setStorageSync("openid", data.result.openid);
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/home/home'
						})
					}, 500)
				}
			},
			//提示
			showinteraction(title, icon = 'none') {
				uni.showToast({
					title,
					icon,
					duration: 2000,
					mask: false
				})
			},
			open(e) {
				console.log(e);
			},
			toFun(url) {
				uni.navigateTo({
					url: '/pages/member/SwitchingAccounts/SwitchingAccounts_AddingAnAccount/SwitchingAccounts_AddingAnAccount'
				})
			},
			async api_index_get_my_accountFun() {
				let data = await api_index_get_my_account(this.openid);
				this.list = data;
			},
			async api_index_save_accountFun() {
				let up = {
					pwd: this.pwd,
					mobile: this.mobile,
					openid: this.openid
				}
				let data = await api_index_save_account(up);
				if (data.error === 0) {
					setTimeout(() => {
						this.api_index_get_my_accountFun();
						this.show = false;
					}, 500)
				}
				this.mobile = '';
				this.pwd = '';
			},
		}
	}
</script>

<style lang="scss">
	.App {
		height: 100vh;
	}

	.H5 {
		height: calc(100vh - 88rpx);
	}

	.SwitchingAccounts {
		width: 100%;
		display: flex;
		flex-direction: column;

		.SwitchingAccounts_box {
			width: 100%;
			flex: 1;
			padding: 0 60rpx;
			overflow-y: auto;

			.SwitchingAccounts_box_item {
				width: 100%;
				height: 200rpx;
				box-shadow: 0 0 10rpx #ccc;
				margin: 40rpx 0;

				.SwitchingAccounts_box_item_top {
					width: 100%;
					height: 100rpx;
					box-shadow: 0 1rpx 0 #ccc;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 30rpx;

					.mobile {
						font-size: 30rpx;
					}

					.itme {
						font-size: 20rpx;
						color: #ccc;
					}
				}

				.SwitchingAccounts_box_item_bottom {
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.SwitchingAccounts_AddingAnAccount {
			width: 100%;
			height: 80rpx;
			padding: 0 40rpx;
			margin: 50rpx 0;

			.SwitchingAccounts_AddingAnAccount_button {
				height: 80rpx;
				background: linear-gradient(3deg, #ff3232, #ff3232, #ff8719);
				line-height: 80rpx;
				color: #fff;
				border-radius: 100rpx;
			}
		}

		.login_bottom_password {
			width: 100%;
			padding: 100rpx 80rpx;

			.login_bottom_password_input {
				margin: 60rpx 0;
				width: 100%;
				height: 80rpx;
				background-color: #f5f5f5;
				border-radius: 50rpx;
				display: flex;
				align-items: center;
				padding: 0 0 0 40rpx;
				overflow: hidden;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				.login_bottom_password_input_text {
					flex: 1;
					height: 100%;
					padding: 0 20rpx;
				}

				.login_box_form_register_password_button {
					padding: 20rpx;
					font-size: 26rpx;
					width: 190rpx;
					text-align: center;
					background: linear-gradient(3deg, #ff3232, #ff3232, #ff8719);
					color: #f5f5f5;
				}
			}
		}
	}
</style>